<template>
	<view class="pages solid-top">
		<!-- header start -->
		<view class="padding-top-56">
			<view class="flex flex-direction align-center">
				<image class="success-icon" :src="imgBaseUrl + 'success.png'" mode="widthFix"></image>
				<view class="margin-top text-bold text-333 fu-fs32">{{ i18n['支付成功'] }}</view>
				<view class="text-999 font-28 margin-top-20">该订单为到点自提订单，请在时间内出示凭证提货</view>
			</view>
			<!-- header end -->
			<view class="text-center margin-top-48">
				<text class="text-price text-bold" style="color: #FF5C5C;font-size: 48rpx;">{{orderInfo.payable_money}}</text>
			</view>
			<view class="code flex flex-direction align-center">
				<view class="font-28 text-333 text-bold">核销码：{{orderInfo.picke_code}}</view>
				<image :src="orderInfo.picke_code_img" class="fu-block-280 margin-top-32"></image>
				<!-- <view class="margin-top-32 btn" @click="save(orderInfo.picke_code_img)">保存到相册</view> -->
			</view>
			<view style="height: 20rpx; background-color: #F6F7F9;"></view>
			<view class="goods-box">
				<block v-for="(item, index) in order_goods" :key="index">
					<view class="flex align-center justify-between shop" @click="handleJump" :data-url="`/pages/goods/shop/shop/index?partner_id=${orderInfo.partner_id}`">
						<view class="flex align-center">
							<image src="https://localelife.chunchuangkeji.cn/h5img/images/009.png" class="fu-block-32 margin-right-16"></image>
							<text class="text-666 font-28 text-bold">{{item.store_name}}</text>
						</view>
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/arrow-r-2.png" style="width: 11rpx;height: 20rpx;"></image>
					</view>
					<view class="goods flex padding-tb-32 solid-bottom">
						<image :src="item.goods_thumb" class="fu-block-160 margin-right-16 flex-shrink radius-8"></image>
						<view class="flex flex-direction justify-between flex1" style="overflow: hidden;">
							<view>
								<view class="text-333 font-28 text-bold text-cut">{{item.goods_name}}</view>
								<view class="flex align-center margin-top-16">
									<view class="flex align-center margin-right-48">
										<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22 margin-right-6"></image>
										<text class="text-666 font-20" v-if="item.is_appointment">需要预约</text>
										<text class="text-666 font-20" v-else>无需预约</text>
									</view>
									<view class="flex align-center">
										<image src="https://localelife.chunchuangkeji.cn/h5img/images/008.png" class="fu-block-22 margin-right-6"></image>
										<text class="text-666 font-20">{{item.business_hours}}</text>
									</view>
								</view>
							</view>
							<view class="flex align-center justify-between">
								<view class="flex" style="align-items: baseline;">
									<view class="text-price text-bold font-32 margin-right-16" style="color: #FF5C5C;">{{item.shop_price}}</view>
									<view class="text-through font-20 text-999">¥{{item.market_price}}</view>
								</view>
								<view class="text-999 fu-fs22">x{{item.num}}</view>
							</view>
						</view>
					</view>
				</block>
				<view class="padding-tb-32">
					<view class="font-28">订单编号：{{orderInfo.order_sn}}</view>
					<view class="font-28 margin-top-24">下单时间：{{ pay_time | formatDate }}</view>
				</view>
			</view>
		</view>
		<!-- 抽奖 -->
	<!-- 	<view class="margin-lr bottomImg">
      <image :src="imgBaseUrl + 'order/bottom_lottery.png'" class="w100" mode="widthFix" @tap="handleJump" data-type="REDIRECT" data-url='/pages/index/choujiang/index'></image>
    </view> -->
		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_type: '',
				order_sn: '', //订单号
				pay_type: '', //支付方式
				pay_time: '' ,//支付时间
				orderInfo: {},
				order_goods: []
			};
		},


		/**
		 * @param {Object} options 入参
		 */
		onLoad(options) {
      const { order_type, order_sn } = options;
			this.setNavigationBarTitle(this.i18n['支付结果']);
			// 订单号
			this.order_type = order_type;
			this.order_sn = order_sn;
			this.getOrderInfo();
		},
		methods: {
			/**
			 * 跳转订单列表
			 */
			toOrder() {
				// 尾款支付成功之后需要用navigateBack，用redirectTo的话,支付完定金再去支付尾款，会导致同时存在两个订单列表页面
				if (this.order_type == 8) {
					uni.navigateBack({
						delta:1
					})
				}else if (this.order_type == 4) {
					this.$urouter.redirectTo({
						url: "/pages/integral/myintegral/integral-exchange-record/index"
					})
				} else {
					this.$urouter.redirectTo({
						url: "/pages/order/order-list/all-order/index"
					})
				}
			},
			save(path) {
				uni.getImageInfo({
					src: path,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
						  filePath: res.path,
						  success: (res) => {
						    this.$message.info('保存成功');
						  },
						  fail:(err)=>{
							  console.log(err)
						  	this.$message.info('保存失败')
						  }
						})
					}
				})
			},
			/**
			 * @author 王正航
			 * @date 2022-08-16
			 * @description 获取支付方式，支付时间
			 */
			getOrderInfo() {
				this.$api.post(global.apiUrls.getOrderInfo, {
          order_sn: this.order_sn
        }).then(res => {
          if (res.data.code == 1) {
			  this.orderInfo = res.data.data
			  this.order_goods = res.data.data.order_goods || []
            this.pay_type = res.data.data.pay_type;
            this.pay_time = res.data.data.pay_time * 1000;
          }
        }).catch(err => {
        });
			},
		}
	};
</script>

<style lang="scss" scoped>
  page {
    .pages {
      min-height: 100vh;
      background: #FFFFFF;
    }
    .bottomImg {
    	position: fixed;
    	left: 0;
    	right: 0;
    	bottom: 200rpx;
    }
  }
  .success-icon {
	  width: 200rpx;
	  height: 144rpx;
  }
  .code {
	  margin: 40rpx 56rpx 32rpx;
	  border-radius: 8rpx;
	  background-color: #F6F7F9;
	  padding: 42rpx;
  }
  .btn {
	  width: 308rpx;
	  height: 72rpx;
	  box-sizing: border-box;
	  border: 1rpx solid #FF6229;
	  background-color: #fff;
	  text-align: center;
	  line-height: 72rpx;
	  font-size: 28rpx;
	  color: #FF6F27;
	  font-weight: bold;
	  border-radius: 40rpx;
  }
  .goods-box {
	  padding: 0 32rpx;
	  .shop {
		  padding-top: 32rpx;
	  }
  }
</style>
